<script lang='ts' setup>
import { useRouter } from 'vue-router';
import { ref, } from "vue"
import ProductBox from '../Common/ProductBox.vue';
import ClipboardJS from "clipboard"
import BaseInfo from './Form/BaseInfo.vue';
import Database from './Form/Database.vue';
import Encrypt from './Form/Encrypt.vue';
// import Version from './Form/Version.vue';
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
const router = useRouter()

const encryptData = ref({
    interior: "**************",
    exterior: "**************",
    empowerInfo: "**************"
})

const submit = () => {
    router.back()
}

const cancel = () => {
    router.back()
}
const cp1 = new ClipboardJS('.copy1');
const cp2 = new ClipboardJS('.copy2');

const cpSuccess = () => {
    messageApi.success("复制成功")
}
cp1.on("success", cpSuccess)
cp2.on("success", cpSuccess)

const updateEncrypt = (data: {
    key: keyof typeof encryptData.value,
    value: string
}) => {
    encryptData.value[data.key] = data.value
}

const value = ref<string>('2');

const visible = ref<boolean>(false);

const hide = () => {
    visible.value = false;

    if (value.value === '4') {
        open2.value = true
        return;
    }
    showModal();
};

// watch(() => value.value, (val) => {
//     console.log(val);
//     router.push({
//         path: '/cart/confirmOrder',
//     })
// })

const open = ref<boolean>(false);
const open2 = ref<boolean>(false);

const showModal = () => {
    open.value = true;
};

const handleOk2 = () => {
    open2.value = false;
}
const handleOk = () => {
    open.value = false;
    router.push({
        path: '/cart/confirmOrder',
    })
};

// watch(() => value.value, (val) => {
// })
</script>
<template>
    <context-holder />
    <div class="pl-5 pr-5">
        <ProductBox title="软件信息" :back="false">
            <BaseInfo>
                <a-descriptions-item label="当前版本">
                    <div class="flex items-center">
                        <span class="mr-5 font-bold">
                            个人版
                        </span>

                        <a-popover v-model:open="visible" title="选择版本" trigger="click">
                            <template #content>
                                <a-radio-group v-model:value="value" name="radioGroup">
                                    <a-radio value="2">商业版</a-radio>
                                    <a-radio value="3">旗舰版</a-radio>
                                    <a-radio value="4">定制版</a-radio>
                                </a-radio-group>

                                <a-button type="primary" @click="hide">确定</a-button>

                            </template>
                            <a-button type="link">升级</a-button>
                        </a-popover>
                    </div>
                </a-descriptions-item>

            </BaseInfo>
            <div class="mt-10 w-full">
            </div>

            <!-- <Version /> -->

            <div class="mt-10 w-full"></div>
            <Database />
            <div class="w-full mt-5"></div>
            <Encrypt :encrypt="encryptData" @update-encrypt="updateEncrypt" />

            <div class="w-full mt-10"></div>
            <a-alert message="注：修改数据库信息，原数据库加密串以及授权即将失效，请及时更新。" type="warning" />
            <div class="w-full mt-5"></div>
            <a-alert message="注：请勿对外开放数据库访问权限，以及公开次加密串。" type="error" />

            <div class="w-full mt-5"></div>

            <div class="flex pb-5">
                <a-button @click="submit" type="primary">提交</a-button>
                <div class="w-5 h-full"></div>
                <a-button @click="cancel">取消</a-button>
            </div>
        </ProductBox>
    </div>


    <a-modal v-model:open="open" title="升级版本" @ok="handleOk">
        <p>升级需要支付2000，是否继续升级？</p>
    </a-modal>

    <a-modal v-model:open="open2" title="升级版本" @ok="handleOk2">
        <p>
            高级定制版需联系我司客服进行定制 联系方式：123456789
        </p>
    </a-modal>
</template>
<style lang='scss' scoped></style>